import { Layout, Button, Space, message, Modal, Input, Select, Switch } from 'myselfantd';
import React, { useState, useRef, useMemo, useCallback } from 'react';
import type { ColumnsType, TableProps } from 'antd/es/table';
import EnterpriseForm from './EnterpriseForm';
import Resources from './Resources';
// import { findConsumerCompanyPage, updateCompanyStatus } from '@/services/api/enterprise';

interface DataType {
  code: number;
  work: string;
  operateArea: number;
  operateDistance: number;
  taskEndTime: string;
  taskStatus: number;
  evaluationState: number;
  option: [];
}
const App: React.FC = () => {
  const ref = useRef<any>();
  const [tableData, setTableData] = useState({
    data: [] as ColumnsType<DataType>,
    page: { total: 0, pageSize: 20, current: 1 },
  });
  const handleClick = async (_: any, state: string, value: string) => {
    setCurState([true, state, value]);
  };
  const [curState, setCurState] = useState([false, 'view', ''] as [boolean, string, string]);
  const handleSwitchChange = async (status: number, id: string) => {
    // let res = await updateCompanyStatus({ status, id });
    // if (!res) {
    //   return false;
    // }
    // message.success('状态更新成功');
    // let { data, total, pageSize, pageIndex } = await findConsumerCompanyPage({
    //   pageIndex: tableData.page.current,
    //   pageSize: tableData.page.pageSize,
    // });
    // setTableData({
    //   data,
    //   page: { total, pageSize, current: pageIndex },
    // });
  };
  return (
    <>
      <Layout.PageTemplate
        pageRef={ref}
        title="企业管理"
        search={useMemo(
          () => ({
            template: [
              {
                name: 'keyword',
                label: '品类名称',
                render: () => <Input placeholder="请输入企业编号、名称、账号"  showCount={false}/>,
              },
            ],
            button: [
              <Button.Image
                size="large"
                style={{ position: 'absolute', right: '10px' }}
                type="primary"
                onClick={() => setCurState([true, 'add', ''])}
                icon={'add'}
              >
                新增企业
              </Button.Image>,
            ],
          }),
          [],
        )}
        table={useMemo(
          () => ({
            template: [
              {
                title: '企业信用编号',
                width: 120,
                fixed: 'left',
                align: 'left',
                dataIndex: 'creditCode',
                render: (text, record, index) => {
                  return index + 1;
                },
              },
              {
                title: '企业名称',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'companyName',
              },
              {
                title: '合作类型',
                width: 150,
                textWrap: 'word-break',
                align: 'left',
                dataIndex: 'cooperateType',
                render: (_) => {
                  enum TYPE {
                    合同客户=0,
                    临时客户=1
                  }
                  return TYPE[_]
                },
              },
              {
                title: '企业账号',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'username',
              },
              {
                title: '联系人',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'nickname',
              },
              {
                title: '联系电话',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'phone',
              },
              {
                title: '账号状态',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'status',
                render: (_, record: any) => {
                  return (
                    <Switch
                      defaultChecked={_}
                      onChange={(status) => handleSwitchChange(Number(status), record.id)}
                    />
                  );
                },
              },
              {
                title: '创建/更新时间',
                width: 120,
                textWrap: 'word-break',
                ellipsis: true,
                align: 'left',
                dataIndex: 'updateTime',
              },
              {
                title: '操作',
                width: 240,
                render: (_, record) => (
                  <Space size="middle">
                    <Button type="link" block onClick={() => handleClick(_, 'config', _)}>
                      资源配置
                    </Button>
                    <Button type="link" block onClick={() => handleClick(_, 'edit', _)}>
                      编辑
                    </Button>
                    <Button type="link" block onClick={() => handleClick(_, 'view', _)}>
                      查看
                    </Button>
                  </Space>
                ),
              },
            ] as ColumnsType<DataType>,
            // data: tableData,
          }),
          [],
        )}
        // request={useCallback(async (page: any, params?: any) => {
        //   let defaultParams: any = {
        //     pageIndex: page.current,
        //     pageSize: page.pageSize,
        //   };
        //   params = { ...defaultParams, ...params };
        //   let {
        //     result: { data, pageIndex, pageSize, total },
        //   } = await findConsumerCompanyPage(params);
        //   return {
        //     data,
        //     page: { total, pageSize, current: pageIndex },
        //   };
        // }, [])}
      />
      <Modal.Dialog
        showDialog={curState[0] && curState[1] === 'config'}
        changeDialog={(val: boolean) => setCurState([val, 'config', curState[2]])}
        size={'big'}
        gray
      >
        <Resources
          params={curState[2]}
          onFinish={(val: boolean) => {
            ref.current?.handleSearch();
            setCurState([false, 'config', curState[2]]);
          }}
          close={() => {
            setCurState([false, 'config', curState[2]]);
          }}
        />
      </Modal.Dialog>
      <Modal.Dialog
        title="新增企业信息"
        showDialog={curState[0] && curState[1] === 'add'}
        changeDialog={(val: boolean) => setCurState([val, 'add', curState[2]])}
        size={'middle'}
      >
        <EnterpriseForm
          viewmode="add"
          close={() => {
            setCurState([false, 'add', curState[2]]);
          }}
          onFinish={(val: boolean) => {
            ref.current?.handleSearch();
            setCurState([val, 'add', curState[2]]);
          }}
        />
      </Modal.Dialog>
      <Modal.Dialog
        title="编辑企业信息"
        showDialog={curState[0] && curState[1] === 'edit'}
        changeDialog={(val: boolean) => setCurState([val, 'edit', curState[2]])}
        size={'middle'}
      >
        <EnterpriseForm
          params={curState[2]}
          viewmode="edit"
          close={() => {
            setCurState([false, 'add', curState[2]]);
          }}
          onFinish={(val: boolean) => {
            ref.current?.handleSearch();
            setCurState([val, 'add', curState[2]]);
          }}
        />
      </Modal.Dialog>
      <Modal.Dialog
        title="查看企业信息"
        showDialog={curState[0] && curState[1] === 'view'}
        changeDialog={(val: boolean) => setCurState([val, 'view', curState[2]])}
        size={'middle'}
      >
        <EnterpriseForm
          params={curState[2]}
          viewmode="view"
          close={() => {
            setCurState([false, 'add', curState[2]]);
          }}
          onFinish={(val: boolean) => {
            setCurState([val, 'add', curState[2]]);
          }}
        />
      </Modal.Dialog>
    </>
  );
};

export default App;
